<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="layout/tpl">
<head>
    <meta charset="UTF-8"/>
    <title>菜单管理</title>

</head>
<body layout:fragment="content">
<div class="panel-group mb-0" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading"  role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    查询框
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item" style="width: 900px; margin: 0 auto;">
                        <div class="layui-inline">
                            <label class="layui-form-label">菜谱名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="spmc"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
<!--                        <div class="layui-inline">-->
<!--                            <label class="layui-form-label">规格型号</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="text" name="ggxh" autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select id="category" name="category" lay-filter="s1" >
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="layui-form-item" style="width: 100px; margin: 0 auto;">
                        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel-footer panel-info" shiro:hasAllRoles="super">
            <button id="addProductBtn" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加菜谱</button>
<!--            <button id="upload" class="layui-btn layui-btn-radius layui-btn-sm"><i class="layui-icon">&#xe67c;</i>上传菜品Excel</button>-->

<!--            <button id="download" class="layui-btn layui-btn-radius layui-btn-sm" style="float:right;"><i class="layui-icon">&#xe67c;</i>导出Excel</button>-->
        </div>
    </div>
</div>
<table id="datagrid" lay-filter="btns"></table>
<script type="text/html" id="opBar">

    <a shiro:hasAllRoles="super" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a shiro:hasAllRoles="super" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" layout:fragment="myscript">
    $(function () {
        layui.use(['table' , 'layer' , 'form' , 'upload'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            var upload = layui.upload; //得到 upload 对象

            form.on('submit(query)' , function(data){
                productGrid.reload({where:data.field})
                return false;
            });

            $("#download").click(function(e){
                window.location.href = "download";
            });

            //创建一个上传组件
            upload.render({
                elem: '#upload'
                ,url: 'uploadProduct'
                ,done: function(res, index, upload){ //上传后的回调
                    var flag = res.success;
                    if(flag) {
                        layer.msg("上传成功");
                        productGrid.reload({
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                }
                ,accept:'file'
                ,exts:'xls|xlsx'
            });

            //添加商品按钮
            $("#addProductBtn").click(function(e){
                window.sIndex = layer.open({
                    type: 2,
                    id:'addProduct',
                    title: '添加商品',
                    fixed: true,
                    scrollbar: true,
                    maxmin:true,
                    area: ['550px', '580px']
                    ,btn: ['添加', '关闭']
                    ,yes: function(){
                        var fIndex = layer.getFrameIndex("addProduct");
                        var mform = layer.getChildFrame("form" , fIndex);
                        var sb = layer.getChildFrame("#sb" , fIndex);
                        var data = {};
                        $.each(mform.serializeArray() , function (index , val){
                            data[val.name] = val.value;
                        });
                        //为了触发验证
                        sb.trigger('click');
                    }
                    ,content: 'addDialog'
                });

            });
            table.on('tool(btns)' , function(obj) {
                var data = obj.data;
                var id = data.id;
                if(obj.event == 'detail') {
                    var index = layer.open({
                        type: 2,
                        title: '查看详情',
                        fixed: true,
                        scrollbar: true,
                        maxmin: true,
                        area: ['600px', '255px'],
                        content: 'detail/'+id
                    });

                } else if(obj.event == 'edit') {
                    window.updateIndex = layer.open({
                        type: 2,
                        id:'updateProduct',
                        title: '修改商品',
                        fixed: true,
                        scrollbar: true,
                        maxmin: true,
                        area: ['600px', '400px'],
                        content: 'updateDialog/'+id,
                        btn: ['确认', '取消'],
                        yes: function(index, layero){
                            var fIndex = layer.getFrameIndex("updateProduct");
                            var mform = layer.getChildFrame("form" , fIndex);
                            var sb = layer.getChildFrame("#sb" , fIndex);
                            var data = {};
                            $.each(mform.serializeArray() , function (index , val){
                                data[val.name] = val.value;
                            });
                            //为了触发验证
                            sb.trigger('click');
                        }
                    });
                } else if(obj.event == 'del') {
                    layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
                        $.post("delete", {id : id} , function(data){
                            if(data.code == 0) {
                                layer.msg(data.msg);
                                productGrid.reload();
                            }
                        } ,"json");
                        layer.close(index);
                    });
                }
            });
            var productGrid = table.render({
                elem: '#datagrid'
                , url: 'getData'
                , cellMinWidth: 80
                , width: '100%'
                , height: 'full-85'
                // , size: 'sm'
                , method: 'post'
                , id: 'productGrid'
                ,cols:[
                    [
                        {field:'dish', width:200, align: 'center' ,title: '菜品名称',fixed: 'left;'}
                        ,{field:'cname', width:240,  align: 'center' ,title: '菜品类型',fixed: 'left;'}
                        ,{field:'stock', width:200, align: 'center' ,title: '库存',fixed: 'left;'}
                        ,{field:'img_path', width:120, align: 'center' ,title: '图片',fixed: 'left;', templet:function(d){
                            var imgs =d.img_path.split(',');
                            var res = "";
                            for (var i = 0 ; i < imgs.length ; i++) {
                                res += "<img src='/getpic/"+imgs[i]+"' style='width:100px;height:100px;' />"
                            }
                            return res
                        }}
                        ,{field:'createtime', width:200, align: 'center' ,title: '创建时间',fixed: 'left;'}
                        ,{title:'操作',width:200, align:'center',  align: 'center' ,toolbar: '#opBar',fixed: 'right'}
                    ]
                ]
                ,page: true
            });
            window.productGrid = productGrid;


            $.post("/mainc/getOptions" , function (data) {
                var categorySelect = $("#category");
                var ts;
                categorySelect.append('<option value="">请选择类型</option>');
                for (var key in data) {
                    ts = categorySelect.append('<optgroup label='+key+'></optgroup>');
                    for (var i = 0 ; i < data[key].length ; i++) {
                        ts.append("<option value='"+data[key][i]['id']+"'>"+data[key][i]['cname']+"</option>");

                    }
                }
                form.render('select');
            } ,"json");

        });
    });
</script>
</html>